<template>
  <div class="detail">
    <van-nav-bar
    left-text="返回"
    title="面经详情"
    fixed
    @click-left="$router.back()"
    />
    <main>
      <div class="title">{{detail.stem}}</div>
      <div class="sub_title">
        <span>{{detail.createdAt}}</span>
        <span> | </span>
        <span>{{detail.views}} 浏览量</span>
        <span> | </span>
        <span>{{detail.likeCount}} 点赞数</span>
      </div>

      <div class="user_info">
        <img :src="detail.creatorAvatar" alt="">
        <span>{{detail.creatorName}}</span>
      </div>

      <div class="content">
        {{ detail.content }}
      </div>
    </main>
    <div class="handle">
      <div class="like" :class="{active: arr[0].isActive}" @click="handleClick(1)">
        <van-icon name="like-o" />
      </div>
      <div class="star" :class="{active: arr[1].isActive}" @click="handleClick(2)">
        <van-icon name="star-o" />
      </div>
    </div>
  </div>
</template>

<script>
import { setCollectApi } from '@/api/collect';
import { getInterviewDetailApi } from '@/api/detail';
import { Toast } from 'vant';
export default {
  name: 'TtDetail',
  data () {
    return {
      detail: {},
      id: '',
      arr: [
        {
          // 点赞
          optType: 1,
          isActive: false
        },
        {
          // 收藏
          optType: 2,
          isActive: false
        }
      ]
    }
  },
  created () {
    // console.log(this.$route.query.id)
    this.id = this.$route.query.id
    this.getDetail(this.$route.query.id)
  },
  methods: {
    async getDetail(id) {
      const res = await getInterviewDetailApi(id)
      // console.log(res)
      this.detail = res.data
      this.arr[0].isActive = this.detail.likeFlag === 1 ? true : false
      this.arr[1].isActive = this.detail.collectFlag === 1 ? true : false
    },
    async handleClick (type) {
      await setCollectApi(this.id, type)
      if (type === 1) {
        this.arr[0].isActive = !this.arr[0].isActive
        Toast.success(this.arr[0].isActive ? '点赞成功' : '取消点赞')
      }
      if (type === 2) {
        this.arr[1].isActive = !this.arr[1].isActive
        Toast.success(this.arr[1].isActive ? '收藏成功' : '取消收藏')
      }
    }
  }

}
</script>

<style lang="less" scoped>
  main {
    padding: 10px;
    margin-top: 46px;

    .title {
      font-size: 30px;
      font-weight: 700;
      margin-bottom: 30px;
    }

    .sub_title {
      font-size: 12px;
      color: #999;
      margin-bottom: 20px;
    }

    .user_info {
      display: flex;
      align-items: center;

      img {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin-right: 10px;
      }

      span {
        font-size: 12px;
        color: #999;
      }
    }

    .content {
      font-size: 16px;
      font-weight: 500;
      color: #333;
      margin-top: 20px;
    }
  }
   
  .van-nav-bar {
    color: red; /* 替换为你想要的颜色 */
  }

  .handle {
    display: flex;
    position: fixed;
    bottom: 100px;
    right: 0;
    width: 160px;
    height: 50px;
    // background-color: #ccc;

    .star,
    .like {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #fff;
      margin-left: 20px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
      text-align: center;
      line-height: 50px;
      font-size: 26px;
    }

    .active {
      color: #fff;
      background-color: #fec635;
    }
  }

</style>